<template>
	<view class="page">
		<view class="topVue text-center">
			<text style="font-weight: 700; font-size: 36rpx; color: #333333;">{{ $t('签到') }}</text>
		</view>
		<u-gap height="92"></u-gap>

		<view class="flex-between align-center padding-row30 margin20">
			<view class="flex-column">
				<text style="font-size: 40rpx; color: #333333;">{{ year }}年{{ month }}月</text>
				<u-gap height="10"></u-gap>
				<text style="color: #666666; font-size: 24rpx;">{{ $t('连续签到挑战更多奖励') }}</text>
			</view>
			<view class="flex">
				<text style="font-size: 32rpx; color: #333333;">{{ $t('已连续签到') }}：</text>
				<text style="font-size: 32rpx; color: #4D9FED;">{{ signInDays }} {{$t('天')}}</text>
			</view>
		</view>

		<view class="flex flex-wrap margin30 padding-row30">
			<view class="li" :class="{ liActive: signRecord.includes(index+'') }" v-for="index of days" :key="index">
				{{ index }}
			</view>
		</view>

		<view class="thVue flex align-center padding-row30 margin30">
			<view class="line"></view>
			<text
				style="font-size: 30rpx; color: #333333; padding-left: 8rpx; font-weight: 600;">{{ $t('连续签到奖励') }}</text>
		</view>

		<!-- 签到奖励列表 -->
		<view class="sign flex align-center padding-row20 margin20" v-for="(item, index) in signAwardList" :key="index">
			<view class="flex-1 flex-between align-center">
				<text style="color: #333333;">{{ $t('连续签到奖励') }} {{ item.name.slice(0, -1) }} {{ $t('天') }}</text>
				<text style="color: #333333;">{{ item. rewardAmount }}JNP</text>
			</view>
			<view class="state">{{ item.completed ? $t('已完成') : $t('未完成') }}</view>
		</view>

		<view class="thVue flex align-center padding-row30 margin30">
			<view class="line"></view>
			<text style="font-size: 30rpx; color: #333333; padding-left: 8rpx; font-weight: 600;">{{$t('今日签到')}}</text>
			<text
				style="font-size: 30rpx; color: #4D9FED; padding-left: 8rpx; font-weight: 600;">{{ signInTimes }}{{$t('次')}}</text>
		</view>

		<view class="lineVue margin30 relative flex-between flex-column">
			<view class="flex-between" style="padding: 20rpx 74rpx 0;">
				<view style="font-size: 24rpx; color: #333333;">1{{ $t('次') }}</view>
				<view style="font-size: 24rpx; color: #333333;">2{{ $t('次') }}</view>
				<view style="font-size: 24rpx; color: #333333;">3{{ $t('次') }}</view>
				<view style="font-size: 24rpx; color: #333333;">4{{ $t('次') }}</view>
			</view>
			<view class="line absolute">
				<u-line-progress active-color="#4D9FED" height="18" :percent="percent"
					:show-percent="false"></u-line-progress>
			</view>
			<image :src="`/static/sign/sign_${percent>=25 ? 1 : 0}.png`" class="absolute"
				style="width: 44rpx; height: 44rpx; left: 70rpx; top: 54rpx;"></image>

			<image :src="`/static/sign/sign_${percent>=50 ? 1 : 0}.png`" class="absolute"
				style="width: 44rpx; height: 44rpx; left: 240rpx; top: 54rpx;"></image>

			<image :src="`/static/sign/sign_${percent>=75 ? 1 : 0}.png`" class="absolute"
				style="width: 44rpx; height: 44rpx; right: 240rpx; top: 54rpx;"></image>

			<image :src="`/static/sign/sign_${percent>=100 ? 1 : 0}.png`" class="absolute"
				style="width: 44rpx; height: 44rpx; right: 70rpx; top: 54rpx;"></image>

			<!-- <view class="flex-between" style="padding: 50rpx 30rpx 0;">
				<view class="time">06:00:00</view>
				<view class="time">12:00:00</view>
				<view class="time">18:00:00</view>
				<view class="time">24:00:00</view>
			</view> -->
			<view class="flex-between">
				<view class="signBtn" :class="{signBtnActive : !canSign}" @click="signFun">{{ $t('点击签到') }}</view>
				<!-- <view class="signBtn" :class="{signBtnActive : percent>=50}" @click="signFun">{{ percent>=50 ? $t('已签到') :  }}</view>
				<view class="signBtn" :class="{signBtnActive : percent>=75}" @click="signFun">{{ percent>=75 ? $t('已签到') : $t('点击签到') }}</view>
				<view class="signBtn" :class="{signBtnActive : percent>=100}" @click= "signFun">{{ percent>=100 ? $t('已签到') : $t('点击签到') }}</view>-->
			</view>

		</view>
		<view class="w100 margin30 flex-center" v-if="!canSign">
			{{ $t('距离下次签到') }}：<u-count-down :timestamp="timestamp"></u-count-down>
		</view>
		<u-gap height="60"></u-gap>
	</view>
</template>

<script>
	import {
		ethers
	} from "ethers";
	import wallet from '../../common/wallet';
	import walletConfig from "../../common/wallet-config";
	import init from "../../index";
	export default {
		data() {
			return {
				address: "",
				year: "",
				month: "",
				days: 0,
				allowance: 0,
				needApprove: true,
				canSign: false, // 能否签到
				percent: 0,
				signInDays: 0,
				signInTimes: 0,
				signAwardList: [],
				signRecord: [],
				timestamp: 0
			}
		},

		async onLoad() {
			this.address = uni.getStorageSync("localeAddress");
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth();
			this.days = new Date(year, month + 1, 0).getDate();
			this.year = year
			this.month = month + 1

			const nextDay = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate() + 1));
			const timestamp_end = nextDay.getTime() / 1000 - 28800;
			const timestamp_start = now.getTime() / 1000

			this.timestamp = (timestamp_end - timestamp_start) % 21600
			this.getSignInDays()
			this.getSignInfo()
			this.getSignInTimes()
			this.getSignRecord()
			this.getAllowance();
		  await this.canSignIn();
		},

		methods: {
			async getAllowance() {
				await wallet.getTokenAllowance(walletConfig.usdtAddress, this.address, walletConfig.factoryAddress)
					.then(res => {
						this.allowance = res;
						this.needApprove = this.allowance < 0.35;
					})
			},
			async canSignIn() {
				await wallet.canSignIn(this.address).then(res => {
					this.canSign = res;
				})
			},
			async getSignInDays() {
				const res = await this.$request("/front/user/signInDays")
				if (res.code === -2) {
					await init.initAddress();
				}
				if (res.code === 0) this.signInDays = res.data
			},
			async getSignInfo() {
				const res = await this.$request("/front/user/signInInfo")
				if (res.code === 0) this.signAwardList = res.data
			},
			async getSignInTimes() {
				const res = await this.$request("/front/user/signInTimes")
				if (res.code === 0) {
					this.signInTimes = res.data
					this.percent = this.signInTimes / 4 * 100
				}
			},
			async getSignRecord() {
				const res = await this.$request("/front/user/signInRecord")
				if (res.code === 0) {
					res.data.forEach(item => {
						let day = item.split("-")[2]
						this.signRecord.push(day.replace(/\b(0+)/gi, ""))
					})
				}
			},
			async approve() {
				await wallet.approve(walletConfig.usdtAddress, walletConfig.factoryAddress, ethers.parseEther(
						"0.35"))
					.then(res => {
						this.$u.toast(this.$t("成功"));
						this.getAllowance();
					})
			},
			async signIn() {
				await wallet.signIn().then(res => {
					this.$u.toast(this.$t("成功"));
					this.getAllowance();
					this.getSignInDays()
					this.getSignInfo()
					this.getSignInTimes()
					this.getSignRecord()
				})
			},
			async signFun() {
				if (!this.canSign) return this.$u.toast(this.$t("已签到"));
				if (this.needApprove) {
					await this.approve().then(async () => {
						await this.signIn().catch(err => {
							this.$u.toast(err.message)
						})
					}).catch(err => {
						this.$u.toast(err.message);
					})
				} else {
					await this.signIn().catch(err => {
						this.$u.toast(err.message)
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.topVue {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(to bottom, #E3EEFF, #EBF3FF);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.li {
		width: 92rpx;
		height: 92rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 92rpx;
		background: #F1F6FF;
		font-size: 40rpx;
		color: #000000;
		margin-right: 7rpx;
		margin-bottom: 7rpx;
	}

	.liActive {
		background: #4D9FED;
		color: #fff;
	}

	.thVue {
		width: 100%;
		height: 32rpx;

		.line {
			width: 6rpx;
			height: 30rpx;
			background: #4D9FED;
			border-radius: 8rpx;
		}
	}

	.sign {
		width: 690rpx;
		height: 58rpx;
		background: #F1F6FF;

		.state {
			width: 200rpx;
			height: 58rpx;
			line-height: 58rpx;
			color: #333333;
			text-align: right;
		}
	}

	.lineVue {
		width: 690rpx;
		height: 200rpx;

		.line {
			width: 690rpx;
			left: 0;
			top: 60rpx;
		}

		.time {
			width: 120rpx;
			text-align: center;
			font-size: 24rpx;
		}

		.signBtn {
			width: 100%;
			height: 70rpx;
			background: #4D9FED;
			border-radius: 20rpx;
			line-height: 70rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}

		.signBtnActive {
			background: rgba(77, 159, 237, 0.50);
		}
	}
</style>
